<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:sec="http://www.springframework.org/security/facelets/tags">

    <f:view contentType="text/html">

        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Sistema de Mala-Direta</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

            <script language="javascript" src="#{request.contextPath}/js/locale.js"></script>
            <script language="javascript" src="#{request.contextPath}/js/padrao.js"></script>

            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }

                .ui-widget, .ui-widget .ui-widget {
                    font-size: 98% !important;
                    font-weight: bold;
                    height:max-content !important;
                    overflow:visible !important;
                } 

                .ui-menu {
                    width: auto !important;
                    height:max-content !important;
                    overflow:visible !important;
                }

                .ui-menu .ui-menu-item .ui-menu-item-label {
                    padding: .4em 4.7em;
                    height:max-content !important;
                    overflow:visible !important;
                }

                .ui-menu .ui-menu-parent .ui-menu-child {  
                    white-space: nowrap !important;  
                    width: 700px !important;
                    height:max-content !important;
                    overflow:visible !important;
                }
            </style>

            <script type="text/javascript">
                function fechaPanel() {
                    PF('pnCadastro').toggle();
                    //PF('pnConsulta').toggle();
                    //PF('pnRelatorio').toggle();
                    PF('pnAdmin').toggle();
                }
            </script>

            <ui:insert name="head"></ui:insert>

        </h:head>

        <h:body>
            <p:tooltip />
            <p:layout id="layPrincipal" fullPage="true">
                <p:layoutUnit id="top" position="north" resizable="true" closable="false" collapsible="true" collapsed="true" header="SISTEMA DE MALA-DIRETA - Usuário Logado: #{userSession.user.nomUser}" style="height: 20px; font-weight:bold;">
                    <h:form>
                        <table width="100%">
                            <tr>
                                <td>
                                    <h:outputLink target="_blank" value="http://www.ibirapuera.com.br/" title="Site Shopping Ibirapuera" style="margin-bottom:2px;">
                                        <p:graphicImage value="/images/logo_SA_1.png" height="70px;" />
                                    </h:outputLink>
                                </td>
                                <td align="right">
                                    <h:outputLink value="#{request.contextPath}/index.jsp" title="Trocar Usuário // Sair" style="margin-bottom:2px;">
                                        <p:graphicImage value="/images/dock/home.png" height="70px;" />
                                    </h:outputLink>
                                </td>
                            </tr>
                        </table>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="350" resizable="true" closable="false" collapsible="true" header="MENU PRINCIPAL" minSize="200">

                    <p:panel id="cadastro" header="CADASTROS" toggleable="true" widgetVar="pnCadastro" collapsed="false" rendered="#{menuView.verificaAcesso(4,'menu')}">
                        <h:form id="frmMenu1">
                            <p:slideMenu id="menuCadastro" model="#{menuView.modelCadastro}" style="font-weight: bold;" backLabel="Voltar" />
                        </h:form>
                    </p:panel>

                    <p:panel id="consulta" header="CONSULTAS" toggleable="true" widgetVar="pnConsulta" collapsed="false" rendered="#{menuView.verificaAcesso(5,'menu')}">
                        <h:form id="frmMenu2">
                            <p:slideMenu id="menuCadastro2" model="#{menuView.modelConsulta}" style="font-weight: bold;" backLabel="Voltar" />
                        </h:form>
                    </p:panel>

                    <p:panel id="relatorio" header="RELATÓRIOS" toggleable="true" widgetVar="pnRelatorio" collapsed="false" rendered="#{menuView.verificaAcesso(6,'menu')}">
                        <h:form id="frmMenu3">
                            <p:slideMenu id="menuCadastro3" model="#{menuView.modelRelatorio}" style="font-weight: bold;" backLabel="Voltar" />
                        </h:form>
                    </p:panel>

                    <p:panel id="administrativo" header="ADMINISTRATIVO" toggleable="true" widgetVar="pnAdmin" collapsed="false" rendered="#{menuView.verificaAcesso(17,'menu')}">
                        <h:form id="frmMenu4">
                            <p:slideMenu class="ui-menu" id="menuAdministrativo" model="#{menuView.modelAdministrativo}" style="font-weight: bold;" backLabel="Voltar" />
                        </h:form>
                    </p:panel>

                    <p:panel header="Escolha o seu Tema">
                        <h:panelGrid columns="1">
                            <div id="globalthemeswitcher">
                                <h:form id="frmTheme">
                                    <p:growl id="messagesTheme" life="5000" showDetail="true" />

                                    <p:themeSwitcher value="#{themeSwitcherBean.theme}" style="width:200px;" effect="fade" var="t">
                                        <f:selectItems value="#{themeSwitcherBean.advancedThemes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}"/>
                                        <p:ajax listener="#{themeSwitcherBean.saveTheme}" update="messagesTheme"/>

                                        <p:column>
                                            <h:graphicImage name="images/themes/#{t.image}" />
                                        </p:column>

                                        <p:column>
                                            #{t.name}
                                        </p:column>
                                    </p:themeSwitcher>
                                </h:form>
                            </div>
                        </h:panelGrid>
                    </p:panel>
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center" resizable="true" collapsible="true">
                    <h:form id="frmPrincipal">
                        <p:growl id="messages" showDetail="true" />

                        <ui:insert name="content">...</ui:insert>
                    </h:form>
                </p:layoutUnit>
            </p:layout>

            <ui:insert name="status">
                <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">

                    <f:facet name="start">
                        <p:graphicImage value="/images/loading.gif" />
                    </f:facet>

                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
            </ui:insert>

            <ui:insert name="highlight">
                <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
                <script language="javascript">
            SyntaxHighlighter.all();
                </script>
            </ui:insert>

        </h:body>


    </f:view>
</html>
